<template>
  <div id="index" ref="appRef">
    <!-- 导航 -->
    <div style="height:82px;lineHeight: 82px;" class="l-relative l-m-y-10">
      <div style="height:82px;lineHeight: 82px;" class="l-absolute l-w-100">
        <img height="82" class="l-w-100" src="@/static/img/home/nav-bg.png" alt="" srcset="">
      </div>
      <div class="process-col l-h-100 l-relative l-zIndex-1 l-font-s-21 l-flex l-col-center">
        <div v-for="(item, index) in process" :key="index" class="l-flex l-col-center l-row-center">
          <div style="width: 272px;height: 55px;" class="l-cursor-pointer l-relative l-p-t-5">
            <img class="l-absolute l-w-100 l-h-100" src="@/static/img/home/but.png" alt="" srcset="">
            <div @click="goButtom(item.url)" class="l-h-100 l-flex l-row-center l-col-center l-relative l-zIndex-1">
              {{ item.name }}
            </div>
          </div>
          <div v-if="index != process.length - 1" class="l-flex l-col-center l-row-center l-m-x-10"
            style="width: 44px;height: 33px;">
            <img class="l-w-100 l-h-100" src="@/static/img/home/jiantou.png" alt="" srcset="">
          </div>
        </div>
      </div>
    </div>
    <div >
      <!-- 会议信息--表格 -->
      <div id="form1" class="">
        <dv-border-box-1 :dur="10">
          <div class="l-col-fff l-p-30">
            <div class="title l-flex l-row-between l-p-b-20">
              <div class="l-relative l-w-100 l-flex-1">
                <div style="height: 36px;" class="l-absolute">
                  <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                </div>
                <div style="margin-left: 4rem" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                  会议信息 Meeting Information
                </div>
              </div>
              <div class="l-flex l-col-center ">
                <div>查询日期：</div>
                <div>
                  <a-date-picker v-model:value="date" />
                </div>
              </div>
            </div>
            <dv-scroll-board hoverPause :config="infoConfig" style="width:100%;height:280px" />
          </div>
        </dv-border-box-1>
      </div>
      <!-- 会议室预定--表格 -->
      <div id="form2" class="">
        <dv-border-box-8 :dur="10">
          <div class="l-col-fff l-p-30">
            <div class="title l-flex l-row-between l-p-b-20">
              <div class="l-relative l-w-100 l-flex-1">
                <div style="height: 36px;" class="l-absolute">
                  <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                </div>
                <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                  会议信息 Meeting Information
                </div>
              </div>
              <div class="l-flex l-col-center">
                <a-space>
                  <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                  <a-input class="l-input-border l-col-fff" v-model:value="value" :bordered="false" placeholder="请输入" />
                  <a-button>搜索</a-button>
                </a-space>
              </div>
            </div>
            <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
          </div>
        </dv-border-box-8>
      </div>
      <!-- 会议室预定--表格 -->
      <div id="form3" class="">
        <dv-border-box-1>
          <div class="l-col-fff l-p-30">
            <div class="title l-flex l-row-between l-p-b-20">
              <div class="l-relative l-w-100 l-flex-1">
                <div style="height: 36px;" class="l-absolute">
                  <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                </div>
                <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                  与会人员 Conference Room Reservation
                </div>
              </div>
              <div class="l-flex l-col-center">
                <a-space>
                  <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                  <a-input class="l-input-border l-col-fff" v-model:value="value" :bordered="false" placeholder="请输入" />
                  <a-button>搜索</a-button>
                </a-space>
              </div>
            </div>
            <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
          </div>
        </dv-border-box-1>
      </div>
      <!-- 会议室预定--表格 -->
      <div id="form3" class="">
        <dv-border-box-1>
          <div class="l-col-fff l-p-30">
            <div class="title l-flex l-row-between l-p-b-20">
              <div class="l-relative l-w-100 l-flex-1">
                <div style="height: 36px;" class="l-absolute">
                  <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                </div>
                <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                  与会人员 Conference Room Reservation
                </div>
              </div>
              <div class="l-flex l-col-center">
                <a-space>
                  <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                  <a-input class="l-input-border l-col-fff" v-model:value="value" :bordered="false" placeholder="请输入" />
                  <a-button>搜索</a-button>
                </a-space>
              </div>
            </div>
            <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
          </div>
        </dv-border-box-1>
      </div>
      <!-- 会议室预定--表格 -->
      <div id="form3" class="">
        <dv-border-box-1>
          <div class="l-col-fff l-p-30">
            <div class="title l-flex l-row-between l-p-b-20">
              <div class="l-relative l-w-100 l-flex-1">
                <div style="height: 36px;" class="l-absolute">
                  <img class="l-h-100" src="@/static/img/title-bg.png" alt="" srcset="">
                </div>
                <div style="margin-left: 4rem;" class="l-relative l-h-100 l-zIndex-1 l-flex l-col-center l-title-col">
                  与会人员 Conference Room Reservation
                </div>
              </div>
              <div class="l-flex l-col-center">
                <a-space>
                  <a-select ref="select" v-model:value="value1" style="width: 120px" @focus="focus"
                    @change="handleChange">
                    <a-select-option value="jack">Jack</a-select-option>
                    <a-select-option value="lucy">Lucy</a-select-option>
                    <a-select-option value="disabled" disabled>Disabled</a-select-option>
                    <a-select-option value="Yiminghe">yiminghe</a-select-option>
                  </a-select>
                  <a-input class="l-input-border l-col-fff" v-model:value="value" :bordered="false" placeholder="请输入" />
                  <a-button>搜索</a-button>
                </a-space>
              </div>
            </div>
            <dv-scroll-board :config="infoConfig" style="width:100%;height:280px" />
          </div>
        </dv-border-box-1>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref, onMounted, onUnmounted
} from 'vue'
import useDraw from '@/utils/useDraw'
const process = ref([{ id: 1, name: '会议确认', url: 'form1' }, { id: 1, name: '会议前期', url: 'form2' }, { id: 1, name: '会议当天', url: 'form3' }, { id: 1, name: '会议后期', url: 'form4' }])
const date = ref()
const infoConfig = ref({
  header: ['项目名称', '详细内容', '责任人', '时间节点'],
  headerHeight: 40,
  waitTime: "5000",
  evenRowBGC: 'rgb(44 106 243 / 70%)',
  oddRowBGC: 'rgb(44 106 243 / 50%)',
  data: [
    ['会议名称1', '互联网生态下的智能科技产物', '行1列3', '2023年10月07日'],
    ['会议名称2', '言必信，行必果。', '行2列3', '2023年10月10日'],
    ['会议名称3', '敏而好学，不耻下问。', '行3列3', '2023年10月11日'],
    ['会议名称4', '志当存高远。', '行4列3', '2023年10月10日'],
    ['会议名称5', '知者乐水，仁者乐山。', '行5列3', '2023年10月12日'],
    ['会议名称6', '自行束修以上，吾未尝无诲焉。', '行6列3', '2023年10月13日'],
    ['会议名称7', '知者乐水，仁者乐山。', '行7列3', '2023年10月14日'],
    ['会议名称8', '自行束修以上，吾未尝无诲焉。', '行8列3', '2023年10月16日'],
    ['会议名称9', '自行束修以上，吾未尝无诲焉。', '行9列3', '2023年10月18日'],
  ]
})
// 跳转到页面
const goButtom = (event) => {
  document?.getElementById(event)?.scrollIntoView({
    behavior: "smooth", //smooth:平滑，auto：直接定位
    block: "start",
    inline: "start",
  });
}
// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
// todo 处理 loading 展示
// 生命周期
onMounted(() => {
  // handleTime()
  // todo 屏幕适应
  windowDraw()
  calcRate()
})

onUnmounted(() => {
  unWindowDraw()
  // clearInterval(timeInfo.setInterval)
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.process-col {
  color: #73BAFF;
}

::v-deep .dv-scroll-board {

  .header {
    background: linear-gradient(180deg, #B8DDFF 0%, #2C6AF3 100%) !important;
  }
}</style>
